<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:screenHeight + 'px'}]">
		<cu-custom isBack="true" bgColor="bg-gradual-blue">
			<block slot="backText">返回</block>
			<block slot="content">络筒实时数据详情</block>
		</cu-custom>
		<view class="fixedtwo" :style="{top:CustomBar + 'rpx'}">
			<text class="texttwo">{{name}}</text>
			<image style="width: 100%;height: 400rpx;" mode="scaleToFill" src="/static/images/timedataWinding.jpg"></image>
		</view>
		<!-- <scroll-dome :list="list" :isShow="false" @jumpArchives="jumpArchives"></scroll-dome> -->
		<navTab ref="navTab" :number="4" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		<swiper :current="currentTab" @change="swiperTab" :class="['swiper' ,BackGroundBox]" :style="{top:CustomBar + 500 + 'rpx',height:height + 'px'}">
			<swiper-item v-for="listItem in deliverplan" :key="listItem.id">
				<scroll-view style="height: 100%;" scroll-y scroll-with-animation>
					<!-- 数据列表组件 -->
					<scroll-view style="height: 100%;" scroll-y scroll-with-animation>
						<view :class="['cu-form-group',item.class]" v-for="(item,index) in listItem.newsList" :key="index">
							<view class="title" style="min-width:calc(5em + 126rpx)">{{item.description}}</view>
							<input type="text" disabled :value="item.value" />
						</view>
					</scroll-view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import navTab from '@/colorui/components/navTab.vue'
	import ScrollDome from '@/colorui/components/ScrollDome'
	import {
		mapGetters
	} from 'vuex'
	import {
		getMinuteInfo
	} from '@/service/selectList'
	export default {
		data() {
			return {
				name: '',
				CustomBar: this.CustomBar,
				screenHeight: this.screenHeight,
				tabTitle: ['机器信息', '设定信息', '生产信息', '故障信息'], //导航栏格式
				currentTab: 0, //sweiper所在页
				deliverplan: [{
						newsList: [],
						isShow: true,
						id: '1'
					},
					{
						newsList: [],
						isShow: true,
						id: '2'
					},
					{
						newsList: [],
						isShow: true,
						id: '3'
					},
					{
						newsList: [],
						isShow: true,
						id: '4'
					},
				]
			}
		},
		components: {
			ScrollDome,
			navTab,
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox']),
			height() {
				return this.screenHeight - uni.upx2px(this.CustomBar) - uni.upx2px(490)
			}
		},
		onLoad(option) {
			this.name = option.name
			getMinuteInfo('1',1,'络简').then(res => {
				console.log(res);
			})
			let data = [{
					group: '1',
					description: '运行状态',
					value: '55',
					tag: '20'
				},
				{
					group: '1',
					description: '锭翼理论速度',
					value: '20',
					tag: '20'
				},
				{
					group: '1',
					description: '锭翼实际速度',
					value: '20',
				},
				{
					group: '1',
					description: '筒管理论速度',
					value: '20',
				},
				{
					group: '1',
					description: '筒管实际速度',
					value: '20',
				},
				{
					group: '1',
					description: '罗拉理论速度',
					value: '20',
				},
				{
					group: '1',
					description: '罗拉实际速度',
					value: '20',
				},
				{
					group: '1',
					description: '升降理论速度',
					value: '20',
				},
				{
					group: '1',
					description: '升降实际速度',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比1',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比2',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比3',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比4',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比5',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比6',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比7',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比8',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比9',
					value: '20',
				},
				{
					group: '2',
					description: '设定百分比10',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速1',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速2',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速3',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速4',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速5',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速6',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速7',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速8',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速9',
					value: '20',
				},
				{
					group: '2',
					description: '设定十段速10',
					value: '20',
				},
				{
					group: '3',
					description: '当前班落纱次数',
					value: '20',
				},
				{
					group: '3',
					description: '当前班生产米数',
					value: '20',
				},
				{
					group: '3',
					description: '当前班工作时',
					value: '20',
				},
				{
					group: '3',
					description: '当前班工作分',
					value: '20',
				},
				{
					group: '3',
					description: '当前班工作效率',
					value: '20',
				},
				{
					group: '3',
					description: '早班落纱次数',
					value: '20',
				},
				{
					group: '3',
					description: '早班生产米数',
					value: '20',
				},
				{
					group: '3',
					description: '早班工作时',
					value: '20',
				},
				{
					group: '3',
					description: '早班工作分',
					value: '20',
				},
				{
					description: '早班工作效率',
					value: '20',
					group: '3',
				},
				{
					description: '中班落纱次数',
					value: '20',
					group: '3',
				},
				{
					description: '中班生产米数',
					value: '20',
					group: '3',
				},
				{
					description: '中班工作时',
					value: '20',
					group: '3',
				},
				{
					description: '中班工作分',
					value: '20',
					group: '3',
				},
				{
					description: '晚班工作效率',
					value: '20',
					group: '3',
				},
				{
					description: '晚班落纱次数',
					value: '20',
					group: '3',
				},
				{
					description: '晚班生产米数',
					value: '20',
					group: '3',
				},
				{
					description: '晚班工作时',
					value: '20',
					group: '3',
				},
				{
					description: '晚班工作分',
					value: '20',
					group: '3',
				},
				{
					description: '晚班工作效率',
					value: '20',
					group: '3',
				},
				{
					description: '当前落纱生产米数',
					value: '20',
					group: '3',
				},
				{
					description: '当前落纱总用时',
					value: '20',
					group: '3',
				},
				{
					description: '当前落纱总用分',
					value: '20',
					group: '3',
				},
				{
					description: '当前落纱工作时',
					value: '20',
					group: '3',
				},
				{
					description: '当前落纱工作分',
					value: '20',
					group: '3',
				},
				{
					description: '换向张力调整起始层',
					value: '20',
					group: '3',
				},
				{
					description: '换向张力调整距离',
					value: '20',
					group: '3',
				},
				{
					description: '小纱张力调整起始层',
					value: '20',
					group: '3',
				},
				{
					description: '小纱张力调整结束层',
					value: '20',
					group: '3',
				},
				{
					description: '预满纱长度',
					value: '20',
					group: '3',
				},
				{
					description: '加捻圈数',
					value: '20',
					group: '3',
				},
				{
					description: '盘头方式',
					value: '20',
					group: '3',
				},
				{
					description: '留头长度',
					value: '20',
					group: '3',
				},
				{
					description: '打箍圈数',
					value: '20',
					group: '3',
				},
				{
					description: '盘头张力调节',
					value: '20',
					group: '3',
				},
				{
					description: '捻度设定',
					value: '20',
					group: '3',
				},
				{
					description: '实时线速度',
					value: '20',
					group: '3',
				},
				{
					description: '筒管直径',
					value: '20',
					group: '3',
				},
				{
					description: '每层厚度',
					value: '20',
					group: '3',
				},
				{
					description: '上换向张力调整系数',
					value: '20',
					group: '3',
				},
				{
					description: '下换向张力调整系数',
					value: '20',
					group: '3',
				},
				{
					description: '小纱张力调整系数',
					value: '20',
					group: '3',
				},
				{
					group: '4',
					description: '故障指示1',
					value: '20',
				},
				{
					description: '故障指示2',
					value: '20',
					group: '4',
				},
				{
					description: '故障指示3',
					value: '20',
					group: '4',
				},
				{
					description: '故障指示4',
					value: '20',
					group: '4',
				},
				{
					description: '故障指示5',
					value: '20',
					group: '4',
				},
				{
					description: '故障指示6',
					value: '20',
					group: '4',
				},
				{
					description: '故障指示7',
					value: '20',
					group: '4',
				},
				{
					description: '运行记录',
					value: '20',
					group: '4',
				},
			]
			for (let value of data) {
				if (value.group == 1) {
					this.deliverplan[0].newsList.push(value)
					console.log('1');
				} else if (value.group == 2) {
					this.deliverplan[1].newsList.push(value)
				} else if (value.group == 3) {
					this.deliverplan[2].newsList.push(value)
				} else {
					this.deliverplan[3].newsList.push(value)
				}
			}
		},
		methods: {
			changeTab(index) {
				this.currentTab = index
			},
			// swiper 滑动
			swiperTab(e) {
				var index = e.detail.current //获取索引
				console.log(index);
				if (this.tabTitle.length <= 5) {
					this.$refs.navTab.navClick(index)
				} else {
					this.$refs.navTab.longClick(index)
				}
			},
			//监听用户下拉事件
			onPullDownRefresh() {
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		}
	}
</script>

<style lang="scss">
	.fixedtwo {
		position: fixed;
		left: 0px;
		width: 100%;

		.texttwo {
			position: absolute;
			z-index: 1;
			font-size: 40rpx;
			color: #007AFF;
			left: 30rpx;
			bottom: 30rpx;
		}
	}

	.swiper {
		position: fixed;
		width: 100%;
		left: 0px;
	}
</style>
